<div class="breadcrumbs" id="breadcrumbs">
    <ul class="breadcrumb">
        <li>
            <i class="icon-home home-icon"></i>
            <a href="#">博客管理</a>
        </li>

        <li>
            <a href="#">文章列表</a>
        </li>
    </ul>
    <div>
        <input type="hidden" id="cupage" value="1"/>
        <input type="hidden" id="total" value="1"/>
        <input type="hidden" id="formurl" value="/manager/article/getArticlePage"/>
        <input type="hidden" id="startTime" value=""/>
        <input type="hidden" id="endTime" value=""/>
    </div>
</div>

<div class="page-content">
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <i class="icon-reorder"></i>
                        筛选条件
                    </h3>
                </div>
                <div class="panel-body">
                    <form class="form-horizontal">
                        <label for="articleTitle" class="col-sm-1 control-label">文章标题:</label>
                        <div class="col-md-2">
                            <input type="text" class="form-control" id="articleTitle" placeholder="请输入查询条件">
                        </div>
                        <label for="article_type_search" class="col-sm-1 control-label">文章分类:</label>
                        <div class="col-md-2">
                            <select class="form-control dictSelect" id="article_type_search" >
                                <option value="">请选择</option>
                            </select>
                        </div>
                        <label for="status" class="col-sm-1 control-label">是否删除:</label>
                        <div class="col-md-2">
                            <select class="form-control dictSelect" id="status" >
                                <option value="">请选择</option>
                                <option value="0">正常</option>
                                <option value="1">已删除</option>
                            </select>
                        </div>
                        <div class="col-md-1">
                            <input type="button" id="btn-load" class="btn btn-primary btn-pikaqiu"
                                   data-loading-text="加载中..." value="查 询"/>
                        </div>
                    </form>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <i class="icon-reorder"></i>
                        文章列表
                    </h3>
                    <div class="btn-add-pikaqiu">
                        <button class="btn btn-xs" data-toggle="modal" data-target="#articleAddModal"><i
                                class="icon-plus"></i> 添 加
                        </button>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="table-responsive">
                        <table id="sample-table-2" class="table table-striped table-bordered table-hover">
                            <thead>
                            <tr>
                                <th>文章编号</th>
                                <th>文章标题</th>
                                <th>文章分类</th>
                                <th>文章标签</th>
                                <th>阅读次数</th>
                                <th>评论次数</th>
                                <th>是否置顶</th>
                                <th>创建时间</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>

                            <tbody id="loadData">

                            </tbody>
                        </table>
                        <!--#include file="/admin/include/page.html"-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="articleAddModal" tabindex="-1" role="dialog" aria-labelledby="articleAddModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 60%">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">添加文章</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form" id="articleForm">
                    <input type="hidden" id="articleId">
                    <div class="form-group">
                        <label for="article_title" class="col-sm-2 control-label">文章标题</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="article_title" placeholder="请输入文章标题">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="article_type" class="col-sm-2 control-label">文章分类</label>
                        <div class="col-sm-9">
                            <select id="article_type" class="form-control">
                                <option value="">请选择</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="article_content" class="col-sm-2 control-label">文章内容</label>
                        <div class="col-sm-9">
                            <script id="article_content" name="content" type="text/plain">

                            </script>
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="saveArticle()">提交更改</button>
            </div>
        </div>
    </div>
</div>

<script>
    $("#btn-load").on("click", function () {
        var a = $(this);
        a.button("loading");
        $("#cupage").val("1");
        loadData();

    });

    function loadData() {
        var para = {
            curPage: $("#cupage").val(),
            article_title : $("#articleTitle").val(),
            article_type : $("#article_type_search").val(),
            status : $("#status").val()
        };
        loadGetServer($("#formurl").val(), para, function (data) {
            var $loadData = $("#loadData");
            $loadData.html("");
            var list = data.page.list;
            var html_ = "";
            for (var i = 0; i < list.length; i++) {
                html_ += "<tr><td>" + list[i].id + "</td><td>" + list[i].article_title + "</td><td>" + list[i].type_name + "</td>";
                html_ += "<td>" + list[i].type_name + "</td><td>" + list[i].article_views + "</td><td>" + list[i].article_comment_nums + "</td>";
                if(list[i].is_top === 1){
                    html_ += "<td>是</td>";
                } else {
                    html_ += "<td>否</td>";
                }
                html_ += "<td>" + list[i].create_date + "</td>";
                if(list[i].status === 1){
                    html_ += "<td>已删除</td>";
                } else {
                    html_ += "<td>正常</td>";
                }
                html_ += "<td><div class='hidden-sm hidden-xs btn-group'>";
                html_ += "<button class='btn btn-xs btn-info' title='修改' onclick='editArticle(" + list[i].id + ")'><i class='icon-pencil bigger-120'></i>修改</button>";
                html_ += "<button class='btn btn-xs btn-warning' title='删除' onclick='showConfirm(" + list[i].id + ")'><i class='icon-trash bigger-120'></i>删除</button>";
                html_ += "</td></tr>";
            }
            $loadData.html(html_);
            pageValue(data);
            pageData();
            $("#btn-load").button("reset");
        });
    }

    loadData();

    function saveArticle() {
        var para = {
            articleId: $("#articleId").val(),
            article_title: $("#article_title").val(),
            article_type: $("#article_type").val(),
            article_content: ue.getContent()
        };
        loadGetServer('/manager/article/saveArticle', para, function (data) {
            if (data.code !== 0) {
                alert(data.msg);
            } else {
                alert(data.msg);
                $('#articleAddModal').modal('hide');
            }
            loadData();
        });
    }

    function editArticle(articleId) {
        var para = {
            articleId: articleId
        };
        loadGetServer('/manager/article/getArticle', para, function (data) {
            if (data.code !== 0) {
                alert(data.msg);
            } else {
                $('#articleAddModal').modal('show');
                $("#myModalLabel").html("编辑文章");
                $("#articleId").val(data.article.id);
                $("#article_title").val(data.article.article_title);
                $("#article_type").val(data.article.article_type);
                ue.setContent(data.article.article_content);
            }
        });
    }

    $('#articleAddModal').on('show.bs.modal', function () {
        var ue = UE.getEditor('article_content');

        ue.ready(function(){
            ue.setHeight(400)
        });
        $("#articleForm")[0].reset();
    });

    loadArticleType();
    function loadArticleType(){
        loadGetServer('/manager/article/getAllArticleType', {}, function (data) {
            var articeList = data.articeList;
            var html = "";
            html += "<option value=''>请选择</option>";
            for (var i = 0; i< articeList.length; i++){
                html += "<option value='" + articeList[i].id + "'>" + articeList[i].type_name + "</option>";
            }
            $("#article_type").html(html);
            $("#article_type_search").html(html);
        });
    }

    function showConfirm(id) {
        var r = confirm("是否删除该产品？");
        if (r === true) {
            deleteArticle(id);
        }
    }

    function deleteArticle(id){
        loadGetServer('/manager/blog/deleteArticle', {id:id}, function (data) {
            alert(data.msg);
            loadData();
        });
    }
</script>